<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div{
            width:200px;height:200px;border:1px solid red;
            /*当元素的所有有子元素全部副董事,自动识别的高度为0.
            此时后面的元素会顶上来导致元素层叠的显示异常,给元素添加overflow:hidden
            来解决此问题*/
            overflow: hidden;
        }
        div>div{width:50px;height:50px}
        #d1{
            background-color: red;
            float:left;
        }
        #d2{
            background-color: green;
            float:left;
        }
        #d3{
            background-color: blue;
            float:left;
        }
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        a{
            text-decoration: none;
        }
        li{
            float:left;
            margin-right: 20px;
        }
        a:hover{color: blue}

    </style>
</head>
<body>
<ul>
    <a href=""><li>首页</li></a>
    <a href=""><li>直播课</li></a>
    <a href=""><li>线上课</li></a>
    <a href=""><li>精品课</li></a>
    <a href=""><li>免费课</li></a>
</ul>
<div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>
</body>
</html>